import React from "react";
import {Text, Group, Tooltip, ActionIcon, Badge} from "@mantine/core";
import {modals} from "@mantine/modals";
import {IconPencil, IconCheck} from "@tabler/icons-react";

export const IpdSimuStepsCheck = ({
  isChecked,
  setIsChecked,
}: {
  isChecked: boolean;
  setIsChecked: (isChecked: boolean) => void;
}) => {
  return (
    <Group gap="xs">
      <Tooltip
        label="取消确认"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon
          variant="default"
          disabled={!isChecked}
          onClick={() =>
            modals.openConfirmModal({
              title: "警告",
              children: <Text>若本步骤取消确认，则将删除后续步骤所有数据？</Text>,
              labels: {confirm: "确定", cancel: "取消"},
              confirmProps: {color: "red"},
              onCancel: () => console.log("Cancel"),
              onConfirm: () => {
                console.log("Confirmed");
                setIsChecked(false);
              },
            })
          }
        >
          <IconPencil size={16} />
        </ActionIcon>
      </Tooltip>
      <Tooltip
        label="数据确认"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" disabled={isChecked} onClick={() => setIsChecked(true)}>
          <IconCheck size={16} />
        </ActionIcon>
      </Tooltip>
      <Badge autoContrast color={isChecked ? "lime.4" : "red.4"} size="lg" radius="sm">
        {isChecked ? "数据已确认" : "数据未确认"}
      </Badge>
    </Group>
  );
};
